<!--
 * @Author: chaoxiaoshu-mx leukotrichia@163.com
 * @Date: 2023-02-10 14:53:42
 * @LastEditors: chaoxiaoshu-mx leukotrichia@163.com
 * @LastEditTime: 2023-02-10 17:48:15
 * @FilePath: \vue-remote-component\sfc-loader\index.html
 * @Description: 
-->
<!DOCTYPE html>
<html>
<body>
  <div id="app"></div>
  <script src="https://unpkg.com/vue@2/dist/vue.runtime.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader@0.8.4/dist/vue2-sfc-loader.js"></script>
  <script src="https://unpkg.com/axios@1.1.2/dist/axios.min.js"></script>
  <script>

    loadVue();
    async function loadVue() {
      /* <!-- */
      let data = await getVueCode();
      const mainComponent = data;
      /* --> */


    const { loadModule, vueVersion } = window['vue2-sfc-loader'];


    const options = {
      moduleCache: {
        vue: Vue
      },
      getFile(url) {

        if ( url === '/main.vue' )
          return Promise.resolve(mainComponent);
      },
      addStyle() { /* unused here */ },
    }

    loadModule('/main.vue', options)
    .then(component => new Vue(component).$mount('#app'));
    }


    async function getVueCode(){
      let res = await axios.get('http://localhost:3000/test')
      if (res.status == 200) {
        return res.data;
      }
  }
  </script>
</body>
</html>